<template>
  <div>
    <Table
      :tableSource="tableData.list"
      :tableTitle="tableData.userDbKey"
      :tablePow="tableData.power"
    ></Table>
  </div>
</template>

<script>
import { getUserList, editUserList, delUserList } from "../../api";
import Table from "../../components/table";
import { buttonPower } from "../../config/baseConfig";
import { EventName as event } from "../../config/event";
export default {
  name: "userManage",
  components: { Table },
  data() {
    return {
      tableData: {},
    };
  },
  created: async function () {
    this.$bus.on(event["@User:Manage:Table:Edit"], this.handlerEditTable);
    const { data } = await getUserList({});
    this.tableData = data;
  },
  destroyed() {
    this.$bus.un(event["@User:Manage:Table:Edit"], this.handlerEditTable);
  },
  methods: {
    handlerEditTable({ type, rowData }) {
      switch (type) {
        case buttonPower.add.type:
          // this.tableData.list.push(rowData);
          this.handlerAdd();
          break;
        case buttonPower.edit.type:
          this.handlerEdit(rowData);
          break;
        case buttonPower.freeze.type:
          rowData.isactive = false;
          this.handlerFreeze(rowData);
          break;
        case buttonPower.active.type:
          rowData.isactive = true;
          this.handlerFreeze(rowData);
          break;
        case buttonPower.del.type:
          this.tableData.list = this.tableData.list.filter(
            (item) => item._id !== rowData._id
          );
          this.handlerDel(rowData);
          break;
      }
    },
    handlerAdd(rowData) {
      console.log(rowData);
    },
    handlerEdit(rowData) {
      console.log(rowData);
    },
    handlerFreeze: async function (rowData) {
      editUserList({
        ...rowData,
      });
    },

    handlerDel: async function (rowData) {
      delUserList({
        ...rowData,
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>